<template>
	<view class="wrap">
		<view class="top">
			<view class="leftText">
				添加银行卡租金按期付
			</view>
			<view class="rightBut">
				<view class="bgBox">
				</view>
				<text class="">
					签约银行代扣款协议可避免逾期交租
				</text>
			</view>
		</view>
		<view class="item">
			<u--form labelPosition="right" :model="userInfo" ref="uForm">
				<u-form-item label="持卡人姓名" ref="item1" labelWidth="170">
					<u--input v-model="userInfo.account_holder_name" border="none" placeholder="请输入姓名"></u--input>
				</u-form-item>
				<u-form-item label="持卡人身份证" ref="item1" labelWidth="155">
					<u--input v-model="userInfo.usernum" placeholder="请输入身份证" border="none"></u--input>
				</u-form-item>
				<u-form-item label="预留手机号" ref="item1" labelWidth="155">
					<u--input v-model="userInfo.moblie" placeholder="请输入银行预留的手机号" border="none"></u--input>
				</u-form-item>
				<u-form-item label="银行卡开户银行" ref="item1" labelWidth="155">
					<u--input v-model="userInfo.bank_name" placeholder="请输入所属银行" border="none"></u--input>
				</u-form-item>
				<u-form-item label="银行卡开户支行" ref="item1" labelWidth="155">
					<u--input v-model="userInfo.branch_code" placeholder="请输入所属支行" border="none"></u--input>
				</u-form-item>
				<u-form-item label="银行卡号" ref="item1" labelWidth="170">
					<u--input v-model="userInfo.account_number" border="none" placeholder="请输入常用的银行卡号"></u--input>
				</u-form-item>

			</u--form>
		</view>
		<view class="bot" @click="confirm">
			<text >确认绑卡</text>
		</view>
	</view>
</template>

<script>
	import baseurl from "@/config.js"
	// import blankName from '@/common/bankName.js'
	// import BIN from 'bankcardinfo'
	export default {
		data() {
			return {
				userInfo: {
					account_holder_name: "",
					moblie: "",
					bank_name: "",
					branch_code: "",
					account_number: '',
					usernum: ""
				},
			}
		},
		created() {},
		onShow() {
			if(uni.getStorageSync('addBank').account_number){
				this.userInfo = uni.getStorageSync('addBank')
			}
		},
		methods: {
			// 确定按钮
			confirm() {
				let self = this
				let {
					account_holder_name,
					moblie,
					bank_name,
					branch_code,
					account_number,
					usernum
				} = self.userInfo
				console.log(self.userInfo)
				var carBool = /^([1-9]{1})(\d{15}|\d{16}|\d{17}|\d{18}|\d{19})$/.test(account_number)
				let phoneBool = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/.test(moblie)
				if (!account_number) {
					uni.$u.toast('请输入银行卡号');
					return
				} else if (!carBool) {
					uni.$u.toast('请输入正确的银行卡号');
					return
				} else if (!account_holder_name || !bank_name || !branch_code || !usernum) {
					uni.$u.toast('请将信息填写完整');
					return
				} else if (!moblie) {
					uni.$u.toast('请输入电话号码');
					return
				} else if (!phoneBool) {
					uni.$u.toast('请输入正确的电话号码');
					return
				}
				let obj = {
					...self.userInfo,
					is_primary: 0
				}
				console.log(obj)
				// 绑卡
				self._post('user.bank/submit', obj, function(res) {
					if (res.code == 1) {
						uni.showToast({
							title: '绑定成功'
						})
						self.userInfo.account_holder_name = ""
						self.userInfo.moblie = ""
						self.userInfo.bank_name = ""
						self.userInfo.branch_code = ""
						self.userInfo.account_number = ''
						self.userInfo.usernum = ""
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	.top {
		display: flex;
		width: 100%;
		height: 220rpx;
		background-color: #fefffe;
		padding-top: 40rpx;
	}

	.leftText {
		flex: 1;
		font-size: 45rpx;
		font-weight: 600;
		padding: 30rpx;
	}

	.rightBut {
		width: 400rpx;

	}

	.rightBut .bgBox {
		width: 90%;
		height: 90rpx;
		margin-top: 50rpx;
		background: linear-gradient(to right, #fef1ae 0%, #fcf4da 100%);
		border-radius: 50rpx;
		position: relative;
	}

	.rightBut text {
		position: absolute;
		top: 120rpx;
		font-size: 28rpx;
		width: 270rpx;
		left: 380rpx;
		text-align: center;
		color: #ce9a36;
	}

	.codeBox {
		width: 100%;
		// padding: 10rpx;
	}

	.code {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #ffff;
		height: 100rpx;
		padding: 0 30rpx;
		color: #c0c4cc;
	}

	.agreement {
		display: flex;
		margin-top: 20rpx;
	}

	.bot {
		background-color: #fecb31;
		margin: 70rpx auto;
		width: 682rpx;
		height: 88rpx;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.bot text {
		font-weight: 400;
		margin: auto;
		font-size: 35rpx;
	}

	::v-deep.wrap .u-button {
		margin: 0 auto !important;
		width: 100rpx !important;
	}

	.active {
		background-color: #c0c4cc !important;
	}

	.btn {
		height: 80rpx;
		line-height: 80rpx;
		width: 140rpx;
		margin-left: 30rpx;
		font-size: 22rpx;
		background-color: #2979ff;
		color: white;
	}

	::v-deep.uni-select__input-placeholder {
		color: #c0c4cc;
		font-size: 28rpx;
	}

	::v-deep.uni-select {
		border: white;
		padding-left: 8rpx;
	}

	::v-deep.u-button {
		margin: 80rpx auto;
		width: 320rpx !important;
	}

	.wrap {
		padding: 20rpx;
	}

	.title {
		font-size: 44rpx;
		text-align: center;
		display: block;
		position: relative;
		top: 100rpx;
	}

	.item {
		background-color: white;
		margin: 20rpx auto;
		padding: 30rpx;

		.titl {
			font-size: 32rpx;
			display: block;
			margin-bottom: 30rpx;
			margin-top: 40rpx;
		}
	}
</style>